suggest using dynamic import instead of require #228
Conversation
|
@t6adev is attempting to deploy a commit to the MSW Team on Vercel. A member of the Team first needs to authorize it. |
| @@ -77,6 +77,13 @@ import App from './App' | |||
| if (process.env.NODE_ENV === 'development') { | |||
| const { worker } = require('./mocks/browser') | |||
| worker.start() | |||
| /* | |||
| // or you can do this instead | |||
There was a problem hiding this comment.
The problem is that dynamic import works in a different way than require does, so they are not interchangeable in any regard.
requireis not statically analyzable so bundlers cannot tree-shake its calls /importcan be tree-shaken.requireis sync;importis async and must be awaited.
Those are very distinct differences and they directly affect how you should treat setups that utilize either method.
On a related note, we're discussing an issue in Next where the usage of dynamic import results in a race condition between the worker activation and requests on the initial load (see vercel/next.js#43284).
There was a problem hiding this comment.
Hey, @t6adev. Thanks for proposing this. I've left a comment describing my concern with this suggestion.
|
Thank you for your quick response. Ok, now this PR is able to close. |
|
There may be an alternative route I'm experimenting with. With the Server Components in React, you can technically apply the interception and defer the client-side rendering even when using imports because async components are a thing now. Anybody reading this is free to experiment and share their findings. |
Hi, I just notice that here is used require().
Using import() instead is helpful in the doc.
Thank you.